<template>

  <div class="noprint">
    <div class="layout">
      <div class="left-content">
        <div class="left-content-main">
          <div class="systemNameBg">
            <div class="systemName">
              <h2 class="title">华耀科技</h2>
            </div>
          </div>
          <div class="subSysName">
            MaxFusion管控一体化平台
          </div>
        </div>
      </div>
    <div class="noprint">
      <div class="layout-ceiling">
        <div class="layout-ceiling-main">

          <a href="javascript:">{{userInfo.name}},欢迎你</a>
          <a href="#">|</a>
          <a href="javascript:" @click="loginOut">安全退出</a>
        </div>
      </div>
    </div>
    </div>
    <div id="systemLeftNav">
      <Menu @on-select="goto" theme="dark" class="systemLeftMenu" :style="leftSystemMemuStyle">
        <MenuGroup class="menuGroup" @click.native="goto(`${item.url},${item.code}`)" v-for="(item,index) in userLeftMenusData"
                   :key="item.code" :title="item.name">
          <MenuItem v-if="item.firstMenuList.length>0" :key="subItem.code"
                    v-for="(subItem,subIndex) in item.firstMenuList" :name="`${subItem.url},${subItem.code}`">
            &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp
            <Icon type="md-chatbubbles"/>
            {{subItem.name}}
          </MenuItem>
        </MenuGroup>
      </Menu>
    </div>
    <div class="rightDiv" >
        <div class="rightBg" :style="contentStyle"></div>
    </div>
  </div>
</template>
<script>
  import {requestPost} from "../../utils/js/HttpUtil.js"
  import {mapGetters} from 'vuex'
  import router from '../../router/index'
  export default {
    data() {
      return {
        leftSystemMemuStyle: {
          height: ''
        },
        contentStyle: {
          height: '',
        },
        actions: {
          getUserLeftMenusUrl: "/system/role/getUserMenus",
          loginOut:"/system/user/loginOut"
        },
        userLeftMenusData: []
      }
    },
    methods: {
      getHeight() {
        this.leftSystemMemuStyle.height = window.innerHeight - 5 * 12 + 'px';
        this.contentStyle.height = window.innerHeight - 3.75 * 12 + 'px';
      },
      getUserLeftMenus() {
        requestPost(this.actions.getUserLeftMenusUrl, {}, (data) => {
          this.userLeftMenusData = data.data;
        })
      },
      goto(urlAndCode) {
        var uc = urlAndCode.split(',');
        var url = uc[0];
        if (uc[0] != null && uc[0] != "null" && uc[0] != "" && uc[0] != undefined) {
          let routeData = this.$router.resolve(
            { path: uc[0], query: {code:uc[1]} }
          )
          routeData.href=routeData.href.substring(2)
          this.$router.replace({path:'../'+routeData.href})
          //window.open(routeData.href)
        }

      },
      loginOut(){
        requestPost(this.actions.loginOut, {}, (data) => {
          //完成后跳转到login页面
          router.push("/login");

        })
      }

    },
    created() {
      window.addEventListener('resize', this.getHeight);
      this.getHeight();
    },
    mounted() {
      this.getUserLeftMenus();
    },
    destroyed() {
      window.removeEventListener('resize', this.getHeight)
    },
    computed: {
      ...mapGetters([
        'user'
      ]),
      userInfo() {
        return this.user
      }
    }
  }
</script>

<style scoped>
  .layout {
    background: #1bbc9c;
    position: relative;
    overflow: hidden;

  }

  .layout-ceiling {
    background: #1bbc9c;
    overflow: hidden;
    height: 5em;

  }

  .layout-ceiling-main {
    float: right;
    margin-right: 1em;

  }

  .layout-ceiling-main a {
    color: white;
    line-height: 5em;
  }

  .left-content {
    float: left;
    background: #1bbc9c;
    overflow: hidden;
    height: 5em;
  }

  .logo {
    height: 3em;
    float: left;
  }

  .systemLeftMenu {
    width: 15rem !important;
    overflow: auto;
  }

  #systemLeftNav {
    float: left;
  }

  .systemName {
    width: 10em;
    z-index: 9;
    height: 3em;
    line-height: 3em;
    background-image: url(../../assets/images/common/logo2.png);
    background-size: auto 100%;
    background-position: 0 0;
    background-repeat: no-repeat;
    margin-left: 2.5em;
  }

  .logoName {
    width: 20em;
    text-align: center;
  }

  .title {
    position: relative;
    left: 2em;
  }

  .systemNameBg {
    width: 15em;
    margin: auto;
  }

  .subSysName {
    width: 15em;
    text-align: center;
  }

  .rightBg{
    background-image: url("../../assets/indexbg.png");
    background-repeat: no-repeat;
    margin-left: 30%;
    background-size: 70%;

  }
  .rightDiv{
    text-align: center;
  }
@media print{
   .noprint{
       display:none;
   }
   .print{
       display:block;
   }
}
</style>
